<template>
  <div class="w-full h-32 pl-10 pr-10">
    <CollapseContainer class="mt-5" title="Json 预览插件" helpMessage="这是提示">
      <!-- 借助 ScrollContainer 实现滚动效果。ScrollContainer 需要借助父 div 设置高度 -->
      <div class="h-100">
        <ScrollContainer class="p-3">
          <!-- :data 指定绑定的json数据源 -->
          <JsonPreview :data="students" />
        </ScrollContainer>
      </div>
    </CollapseContainer>

    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="JsonPreview">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>

    <!-- 源码 -->
    <CollapseContainer class="mt-5" title="源码">
      <markdown-viewer :value="getSource()" />
    </CollapseContainer>
  </div>
</template>
<script lang="ts" setup>
  import { MarkdownViewer } from '@/components/Markdown';
  import { ScrollContainer, CollapseContainer } from '@/components/Container';

  // 引入 json 预览组件
  import { JsonPreview } from '@/components/CodeEditor';
  // 导入完整 json 代码
  import testData from './testData.json';

  // 解构json节点
  const { students } = testData;
</script>

<script lang="ts">
  function getDoc() {
    return `

* JsonPreview 封装的是 vue-json-pretty 插件, 只提供了一个 data 属性
* 点击大括号实现折叠、展开
* 官网: <a href="https://doc.vvbin.cn/components/json-preview.html" target="_blank">vben JsonPreview 官方文档</a>

`;
  }

  function getSource() {
    return `


\`\`\`html
\<template\>
  <CollapseContainer class="mt-5" title="Json 预览插件" helpMessage="这是提示">
    <!-- 借助 ScrollContainer 实现滚动效果。ScrollContainer 需要借助父 div 设置高度 -->
    <div class="h-100">
      <ScrollContainer class="p-3">
        <!-- :data 指定绑定的json数据源 -->
        <JsonPreview :data="students" />
      </ScrollContainer>
    </div>
  </CollapseContainer>

\</template\>

\<script lang="ts" setup\>
  import { ScrollContainer, CollapseContainer } from '@/components/Container';

  // 引入 json 预览组件
  import { JsonPreview } from '@/components/CodeEditor';
  // 导入完整 json 代码
  import testData from './testData.json';

  // 解构json节点
  const { students } = testData;
\</script\>
\`\`\`

  `;
  }
</script>
